import React, { useEffect, useState } from "react";
import "./toast.less";
import { Alert } from "@mui/material";
import { useSelector, useDispatch } from "react-redux";
import { type } from "os";
import { Hide_Toast } from "@/store/ActionType";
let timer: NodeJS.Timeout;

type IDisplayType = "block" | "none";

export default function Toast() {
  const dispatch = useDispatch();

  const { isShow, message, type } = useSelector(
    (state: IRootState) => state.toastData
  );

  const [display, setDisplay] = useState<IDisplayType>("none");

  // 当isShow每次变成true的时候，我们就提供一个定时器，让toast组件一会就隐藏
  useEffect(() => {
    // 如果isShow是false,就不用开启定时器了
    if (!isShow) return;

    // 为了避免多次触发这个定时器，我们做一个防抖功能
    // 在发起之前，先把之前的定时器停止
    clearTimeout(timer);

    dispatch({
      type: Hide_Toast,
    });
    setDisplay("block");
    // 让isShow等一会就变成false
    timer = setTimeout(() => {
      setDisplay("none");
    }, 2000);
  }, [isShow]);
  // toast的情况
  // 成功、失败、警告、信息提示  ----》从外界传递过来的toast的类型
  // 内容 ====》message
  // 是否显示 ==》isShow
  // ---toast组件 是可能在任何地方调用的，上面的这些数据也是任何地方都可以使用的----》把上面的三个数据放在redux里面

  // toast展示的时间   不需要从外面传入
  return (
    <div className="toast" style={{ display: display }}>
      <Alert severity={type}>{message}</Alert>
    </div>
  );
}
